<template>
  <div class="preview-container">
    <div class="tilte">
      <Icon type="preview"></Icon>
      预览
    </div>
    <div class="preview">
      <div class="preview-item">
        <div v-for="(item, index) in infoArrRef" :key="index">
          <PreviewDisplay
            :icon="item.icon"
            :title="item.title"
            :html="item.html"
            :isShow="item.isShow"
          ></PreviewDisplay>
        </div>
      </div>
      <div class="but">
        <button :class="{enlargeButton:isClick}" @click="checkIn">入住</button>
      </div>
    </div>
    <div class="Layer">
      <MongokuanLayer :isMongokuanLayer="isMongokuanLayerRef" @click="close" >
        <submit ></submit>
      </MongokuanLayer>
    </div>
  </div>
</template>

<script setup>
import MongokuanLayer from "@/components/MongokuanLayer/index.vue"
import { ref, computed } from "vue";
import PreviewDisplay from "./PreviewDisplay.vue";
import Icon from "@/components/Icon/index.vue";
import { useCheckInStore } from "@/store/useCheckInStore.js";
import { storeToRefs } from "pinia";
import submit from "./submit.vue";
const store = useCheckInStore();
const { readCheckInfo } = storeToRefs(store);
const isMongokuanLayerRef = ref(false)
// 是否可以点击入住按钮
const isClick = computed(()=> {
  let start = true
  for (const key in readCheckInfo.value) {
    if(!readCheckInfo.value[key]){
      start = false
    }    
  }
  return start
})
// 卡牌信息
const infoArrRef = computed(() => [
  {
    title: "宿舍楼",
    icon: "dormitory",
    isShow: Boolean(readCheckInfo.value.dormitory),
    html: `<p class='title'>${
      readCheckInfo.value.dormitory
        ? readCheckInfo.value.dormitory.DormitoryName
        : ""
    }</p>
    <p class='people'>以住人数: ${
      readCheckInfo.value.dormitory
        ? readCheckInfo.value.dormitory.dormitoryresided
        : ""
    }人</p>
    <p class='people'>可住人数: ${
      readCheckInfo.value.dormitory
        ? readCheckInfo.value.dormitory.dormitoryCapacity
        : ""
    }人</p>
    <p class="people">宿舍管理员: ${
      readCheckInfo.value.dormitory.AdminInfon
        ? readCheckInfo.value.dormitory.AdminInfon.Nickname
        : "暂无"
    }</p>
    <p class='people'>几人间: ${
      readCheckInfo.value.dormitory
        ? readCheckInfo.value.dormitory.fewPeople
        : ""
    }</p>
    <p class='price'>价格: ${
      readCheckInfo.value.dormitory
        ? readCheckInfo.value.dormitory.RoomRate.price
        : ""
    }元</p>`,
  },
  {
    title: "楼层",
    icon: "floor",
    isShow: Boolean(readCheckInfo.value.floor),
    html: `<p class="title">${
      readCheckInfo.value.floor ? readCheckInfo.value.floor.floorNumber : ""
    }</p><p class='people'>以住人数: ${
      readCheckInfo.value.floor ? readCheckInfo.value.floor.floorResided : ""
    }人</p><p class='people'>可住人数:${
      readCheckInfo.value.floor ? readCheckInfo.value.floor.floorCapacity : ""
    }人</p><p class='people'>保洁员: ${
      readCheckInfo.value.floor.Cleaning
        ? readCheckInfo.value.floor.Cleaning.cleaningName
        : "暂无"
    }</p>`,
  },
  {
    title: "房间",
    icon: "room",
    isShow: Boolean(readCheckInfo.value.room),
    html: `<p class='title'>${readCheckInfo.value.room ? readCheckInfo.value.room.roomNo : ""}</p>
    <p class='people'>以住人数: ${readCheckInfo.value.room ? readCheckInfo.value.room.roomResided : ""}人</p><p class='people'>可住人数: ${readCheckInfo.value.room ? readCheckInfo.value.room.roomCapacity : ""}人</p>`
  },
  {
    title: "床位",
    icon: "bednumber",
    isShow: Boolean(readCheckInfo.value.bednumber),
    html:`<p class='title'>${readCheckInfo.value.bednumber ?readCheckInfo.value.bednumber.bednumberId :""}</p>`
  }
]);
// 入住按钮
function checkIn(){
   if(isClick.value){
     isMongokuanLayerRef.value = true
  }
 
}
// 关闭蒙层
function close(){
  isMongokuanLayerRef.value = false
}

</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.preview-container {
  width: 100%;
  height: 100%;
  .tilte {
    font-size: 25px;
    font-weight: bold;
    margin-left: 10px;
    .icon-container {
      color: @primary;
    }
  }
  .preview {
    width: 100%;
    height: calc(100% - 200px);
    min-height: 300px;
    background-color: @bakeground;
    backdrop-filter: blur(5px);
    box-shadow: 2px 2px 20px #626262;
    padding: 20px 0;

    .preview-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .but {
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 130px;
        height: 50px;
        font-size: 20px;
        border-image: linear-gradient(to left, @frameColor2, @frameColor2) 2;
        clip-path: polygon(2% 0, 0 96%, 98% 100%, 100% 5%);
        background-color: transparent;
        color: #fff;
        cursor: no-drop;
      }
      .enlargeButton{
        animation: enlarge-button .5s linear infinite alternate;
        cursor: pointer;
      }

      @keyframes enlarge-button {
        0%{
          transform: scale(0.9);
        }
        100%{
          transform: scale(1.1);
        }
      }

    }
  }
}
</style>